<template>
<div class="about">
    <el-row :gutter="100">
        <el-col :xl="10" :xs="0" :lg="10">
            <div class="left">
                <el-tabs type="border-card" value="1">
                    <el-tab-pane label="我" name="1">
                        <my-magnify :data="data.i"></my-magnify>
                    </el-tab-pane>
                    <el-tab-pane label="pc端" name="2">
                        <my-magnify :data="data.pc"></my-magnify>
                    </el-tab-pane>
                    <el-tab-pane label="移动端" name="3">
                        <my-magnify :data="data.mobile"></my-magnify>
                    </el-tab-pane>
                    <el-tab-pane label="热爱足球" name="4">
                        <my-magnify :data="data.baskateball"></my-magnify>
                    </el-tab-pane>
                    <el-tab-pane label="vue框架" name="5">
                        <my-magnify :data="data.vue"></my-magnify>
                    </el-tab-pane>
                    <el-tab-pane label="js基础" name="6">
                        <my-magnify :data="data.js"></my-magnify>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-col>
        <el-col :xl="14" :xs="24" :lg="14">
            <div class="right">
                <div class="title">
                    <p>
                        WEB前端开发 JavaScript基础 有一点vue开发经验 / 热爱游戏 /
                        沟通能力薄弱 / lsp
                    </p>
                    <span>目标职业：前端工程师(实习生)</span>
                </div>
                <div class="price">
                    <span class="introduces">价格：</span>
                    <div class="price-number">¥<b>5000.00</b></div>
                    <div class="location">
                        <div>
                            <span class="introduces">商品所在地：</span>
                            <span href="javascripy:;" class="city">江西省 · 瑞金市</span>
                        </div>
                    </div>
                </div>
                <div class="deliver-goods">
                    <div class="one">
                        <span class="introduces">配送至:</span>
                        <div>
                            <div class="province">
                                <el-cascader v-model="selectedOptions" :options="options" :props="{ expandTrigger: 'hover' }"></el-cascader>
                            </div>
                        </div>
                    </div>
                    <div class="two">
                        <div>
                            <span class="introduces">运费:</span>
                            <span class="little-font right-right">
                                免运费(各地均可发货，包各种运送方式)
                            </span>
                        </div>
                    </div>
                </div>
                <div class="buy">
                    <div class="one">
                        <span class="introduces">属性:</span>
                        <el-popover placement="top-start" title="WEB前端开发" width="200" trigger="hover" content="目前只支持这一种工作，其他开发技能敬请期待。">
                            <el-button slot="reference">WEB前端开发</el-button>
                        </el-popover>
                    </div>
                    <div class="two">
                        <span class="introduces">数量:</span>
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
                    </div>
                    <div class="three">
                        <span class="introduces">备注:</span>
                        <span :id="flag">
                            促销商品，仅一件，多拍不发货！
                        </span>
                    </div>
                </div>
                <div class="buyNowdiv">
                    <el-button>立即购买</el-button>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import MyMagnify from "../components/Zoom.vue";
import {
    regionData
} from "element-china-area-data";
export default {
    components: {
        myMagnify: MyMagnify
    },
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            data: {
                i: {
                    min: require("../assets/MySmall.png"),
                    max: require("../assets/MyBig.png")
                },
                pc: {
                    min: require("../assets/PcSmall.png"),
                    max: require("../assets/PcBig.png")
                },
                mobile: {
                    min: require("../assets/MobileSmall.png"),
                    max: require("../assets/MobileBig.png")
                },
                baskateball: {
                    min: require("../assets/YaoSmall.png"),
                    max: require("../assets/YaoBig.png")
                },
                vue: {
                    min: require("../assets/VueSmall.png"),
                    max: require("../assets/VueBig.png")
                },
                js: {
                    min: require("../assets/JsSmall.png"),
                    max: require("../assets/JsBig.png")
                }
            },
            num: 1,
            flag: "nomall"
        };
    },
    watch: {
        data(newValue, oldValue) {
            console.log(newValue, oldValue);
        }
    },
    methods: {
        handleChange() {
            if (this.num !== 1) {
                return (this.flag = "red");
            }
            this.flag = "nomal";
        }
    }
};
</script>

<style lang="less" scoped>
.about {
    padding: 0 50px;
}

.el-tabs {
    height: 1000px;
    width: 450px;

    img {
        width: 100%;
    }

    /deep/.el-tabs__item {
        font-size: 20px;
    }

    /deep/.el-tabs__content {
        height: 920px;
    }
}

.right {
    font-size: 18px;

    .title {
        p {
            font-size: 23px;
        }

        span {
            color: rgb(228, 0, 0);
        }
    }

    .price {
        margin-top: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);

        .price-number {
            color: rgb(228, 0, 0);
            font-size: 25px;

            b {
                font-size: 40px;
            }
        }

        .location {
            margin-bottom: 40px;
            margin-top: 15px;

            .city {
                text-align: center;
                color: #ffffff;
                width: 180px;
                font-size: 20px;
                background-color: rgb(228, 0, 0);
            }
        }
    }
}

.introduces {
    margin-right: 30px;
    opacity: 0.4;
}

.deliver-goods {
    margin-top: 30px;

    .one {
        margin-bottom: 20px;

        .el-cascader {
            margin-top: 20px;
        }
    }

    .two {
        margin-bottom: 20px;
    }
}

.deliver-goods {
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.buy {
    .two {
        margin-top: 40px;
    }

    .three {
        margin-top: 50px;

        #red {
            color: rgb(228, 0, 0);
        }
    }
}

.buyNowdiv {
    margin-top: 40px;

    .el-button {
        padding: 25px 80px;
        font-size: 25px;
        background-color: rgb(228, 0, 0);
        color: #ffffff;
    }
}
</style>
